<td-layout-nav logo="assets:covalent" navigationRoute="/">
  <button mat-icon-button td-menu-button tdLayoutToggle>
    <mat-icon>menu</mat-icon>
  </button>
  <div td-toolbar-content layout="row" layout-align="center center" flex>
    <span>Product Name</span>
    <span flex></span>
    <a mat-icon-button matTooltip="Docs" href="https://teradata.github.io/covalent/" target="_blank"><mat-icon>chrome_reader_mode</mat-icon></a>
    <a mat-icon-button matTooltip="Github" href="https://github.com/teradata/covalent" target="_blank"><mat-icon svgIcon="assets:github"></mat-icon></a>
  </div>
  <td-layout-card-over cardTitle="User form" cardSubtitle="fill form to {{action}} user">
    <ng-template tdLoading="user.form">
      <mat-card-content class="push-bottom-none">
        <form #userForm="ngForm">
          <div layout="row">
            <mat-form-field flex> 
              <input matInput
                      #displayNameElement
                      #displayNameControl="ngModel"
                      type="text" 
                      placeholder="Display Name" 
                      [(ngModel)]="displayName" 
                      name="displayName" 
                      maxlength="20" 
                      required>
              <mat-hint align="start">
                <span [hidden]="displayNameControl.pristine" class="tc-red-600">
                  <span [hidden]="!displayNameControl.hasError('required')">Required</span>
                </span>
              </mat-hint>
              <mat-hint align="end">{{displayNameElement.value.length}} / 20</mat-hint>
            </mat-form-field>
          </div>
          <div layout="row" class="push-top">
            <mat-form-field flex> 
              <input matInput
                      #emailElement
                      #emailControl="ngModel"
                      type="text" 
                      placeholder="Email" 
                      [(ngModel)]="email" 
                      name="email"
                      maxlength="30"
                      pattern="^[a-zA-Z0-9]+(\.[_a-zA-Z0-9]+)*@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*(\.[a-zA-Z]{2,15})$"
                      required>
              <mat-hint align="start">
                <span [hidden]="emailControl.pristine" class="tc-red-600">
                  <span [hidden]="!emailControl.hasError('required')">Required</span>
                  <span [hidden]="!emailControl.hasError('pattern')">incorrect pattern</span>
                </span>
              </mat-hint>
              <mat-hint align="end">{{emailElement.value.length}} / 30</mat-hint>
            </mat-form-field>
          </div>
          <div layout="row">
            <mat-slide-toggle [(ngModel)]="admin" name="admin">Admin</mat-slide-toggle>
          </div>
        </form>
      </mat-card-content>
      <mat-divider></mat-divider>
      <mat-card-actions>
        <button mat-button [disabled]="!userForm.form.valid" color="primary" (click)="save()">SAVE</button>
        <button mat-button (click)="goBack()">CANCEL</button>
      </mat-card-actions>
    </ng-template>
  </td-layout-card-over>
</td-layout-nav>
